import React, { useState } from 'react';
import { Box, List, ListItem, ListItemIcon, ListItemText, Typography, Divider, Collapse, useTheme } from '@mui/material';
import { Download, Schedule, CheckCircle, Tune, Settings, ExpandLess, ExpandMore, Http } from '@mui/icons-material';

export default function Sidebar({ downloadStats, onFilterChange, onViewChange, isSidebarOpen }) {
  const [selectedItem, setSelectedItem] = useState("downloading");
  const [settingsOpen, setSettingsOpen] = useState(false);
  const theme = useTheme();

  const handleItemClick = (item) => {
    setSelectedItem(item);
    if (item === 'basic-settings' || item === 'http-settings') {
      onViewChange(item);
    } else {
      onViewChange('downloading');
      onFilterChange(item);
    }
  };

  const handleSettingsClick = () => {
    setSettingsOpen(!settingsOpen);
  };

  const handleHttpSettingsClick = () => {
    setHttpSettingsOpen(!httpSettingsOpen);
  };

  return (
    <Box
      sx={{
        width: isSidebarOpen ? 260 : 75,
        backgroundColor: theme.palette.background.paper,
        color: theme.palette.text.primary,
        height: '100%',
        position: 'fixed',
        right: 0,
        top: 0,
        bottom: 0,
        zIndex: 1000,
        overflowY: 'auto',
        overflowX: 'hidden',
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen,
        })
      }}
    >
      <Box sx={{ p: 1 }}>
            {isSidebarOpen && (
        <Typography variant="subtitle2" sx={{ bgcolor: theme.palette.grey[600], color: theme.palette.common.white, borderRadius: 1, padding: 1 }}>下载</Typography>
            )}
        <List sx={{ p: 0 }}>
          <ListItem
            sx={{
              color: theme.palette.info.main,
              backgroundColor: selectedItem === 'downloading' ? theme.palette.info.light + '20' : 'transparent',
              '&:hover': { backgroundColor: theme.palette.info.light + '10' },
              cursor: 'pointer'
            }}
            onClick={() => handleItemClick('downloading')}
          >
            <ListItemIcon>
              <Download sx={{ color: theme.palette.info.main }} />
            </ListItemIcon>
            {isSidebarOpen && (
              <ListItemText
                primary={`正在下载 (${downloadStats.downloading})`}
              />
            )}
          </ListItem>
          <ListItem
            sx={{
              color: theme.palette.grey[500],
              backgroundColor: selectedItem === 'paused' ? theme.palette.grey[500] + '20' : 'transparent',
              '&:hover': { backgroundColor: theme.palette.grey[500] + '10' },
              cursor: 'pointer'
            }}
            onClick={() => handleItemClick('paused')}
          >
            <ListItemIcon>
              <Schedule sx={{ color: theme.palette.grey[500] }} />
            </ListItemIcon>
            {isSidebarOpen && (
              <ListItemText
                primary={`正在等待 (${downloadStats.paused})`}
              />
            )}
          </ListItem>
          <ListItem
            sx={{
              color: theme.palette.success.main,
              backgroundColor: selectedItem === 'completed' ? theme.palette.success.light + '20' : 'transparent',
              '&:hover': { backgroundColor: theme.palette.success.light + '10' },
              cursor: 'pointer'
            }}
            onClick={() => handleItemClick('completed')}
          >
            <ListItemIcon>
              <CheckCircle sx={{ color: theme.palette.success.main }} />
            </ListItemIcon>
            {isSidebarOpen && (
              <ListItemText
                primary={`已完成/已停止 (${downloadStats.completed})`}
              />
            )}
          </ListItem>
        </List>
      </Box>

      <Divider sx={{ backgroundColor: theme.palette.divider }} />

      <Box sx={{ p: 1 }}>
            {isSidebarOpen && (
        <Typography variant="subtitle2" sx={{ bgcolor: theme.palette.grey[600], color: theme.palette.common.white, borderRadius: 1, padding: 1 }}>系统设置</Typography>
            )}
        <List sx={{ p: 0 }}>
          <ListItem button onClick={handleSettingsClick} sx={{ color: theme.palette.text.primary }}>
            <ListItemIcon>
              <Tune sx={{ color: theme.palette.text.primary }} />
            </ListItemIcon>
            {isSidebarOpen && (
            <ListItemText primary="基本设置" />
            )}
            {settingsOpen ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={settingsOpen} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem
                sx={{
                  pl: 4,
                  color: theme.palette.text.primary,
                  backgroundColor: selectedItem === 'basic-settings' ? theme.palette.action.selected : 'transparent',
                  '&:hover': { backgroundColor: theme.palette.action.hover },
                  cursor: 'pointer'
                }}
                onClick={() => handleItemClick('basic-settings')}
              >
            <ListItemIcon>
              <Settings sx={{ color: theme.palette.text.primary }} />
            </ListItemIcon>
            {isSidebarOpen && (
                <ListItemText primary="常规设置" />
            )}
              </ListItem>
              <ListItem
                sx={{
                  pl: 4,
                  color: theme.palette.text.primary,
                  backgroundColor: selectedItem === 'http-settings' ? theme.palette.action.selected : 'transparent',
                  '&:hover': { backgroundColor: theme.palette.action.hover },
                  cursor: 'pointer'
                }}
                onClick={() => handleItemClick('http-settings')}
              >
                <ListItemIcon>
                  <Http sx={{ color: theme.palette.text.primary }} />
                </ListItemIcon>
                {isSidebarOpen && (
                  <ListItemText primary="HTTP 设置" />
                )}
              </ListItem>
            </List>
          </Collapse>
        </List>
      </Box>
    </Box>
  );
}
